<template>
	<search-table
	  :columns="targetTeamCol4" 
	  :data="targetTeamData"
      :total="targetTeamTotal"
      :page.sync="queryTargetTeamInfo.pageIndex"
      :size.sync="queryTargetTeamInfo.pageSize"
      @change-page="getTargetPage"
	  @change-size="getTargetSize"
    >
	<template slot="search">
		<Select filterable v-model="queryTargetTeamInfo.name"
				style="width: 150px; margin-right:15px;"
				@on-change="searchTargetTeam" clearable
				placeholder="请选择任务">
			<Option v-for="item in allTargetTeamData" :value="item.name" :key="item.id" :title="item.name">{{ item.name }}</Option>
		</Select>
	</template>
	<Modal v-model="showTeamInfoModel"
	title="团队详情"
	width="1000"
	:mask-closable = "false"
	footer-hide
>
<Row class="targetHeader">
	<Select filterable v-model="teamInfoQuery.teamName"
			style="width: 180px; margin-right:15px;"
			@on-change="searchTeamInfo" clearable
			placeholder="请选择团队">
		<Option v-for="item in teamList" :value="item.name" :key="item.id" :title="item.name">{{ item.name }}</Option>
	</Select>
	<Select filterable v-model="teamInfoQuery.status" placeholder="请选择解决状态"  style="width: 150px;margin-right:15px;" @on-change="searchTeamInfo" clearable>
		<Option :value="1">未解决</Option>
		<Option :value="2">已解决</Option>
	</Select>
	<Page :total=teamInfoTotal
		  show-total show-elevator @on-page-size-change="getTeamInfoSize"
		  :page-size="teamInfoQuery.pageSize"
		  @on-change="getTeamInfoPage" style="float: right">
	</Page>
</Row>
 <TableList :columns="teamInfoCol" :data="teamInfoData"></TableList>
</Modal>
</search-table>
</template>

<script>
	import {getTargetTeamList,addTargetTeam,modifyTargetTeam,getTargetTeamInfo,delTargetTeam,queryVmWithParty,queryTargetAllot,
        submitFlag,reportGrade,ctfReport,getTargetListEr,getTeamInfoEr,getTargetTeamList_new} from '@/api/drill_compete'
	import {queryCtfList} from '@/api/question'
	import groupMixin from '@/mixin/groupMixin'
	export default {
		name: "targetStatic",
		props:['type','poll','drillDetail'], //接受演练竞赛类型
		components:{},
        mixins: [groupMixin],
        data(){
		    return{
                allTargetTeamData: [],
			    targetTeamCol4:[
				    {
					    title:'任务名称',
					    key:'name',
					    align:'center',
					    ellipsis:true,
					    tooltip:true,
					    width:100,
					    placement:'top-left'
				    },
				    {
					    title:'任务镜像',
					    key:'imageName',
					    align:'center',
					    ellipsis:true,
					    tooltip:true,
					    width:100,
				    },
				    {
					    title:'分值',
					    key:'score',
					    align:'center',
					    ellipsis:true,
					    tooltip:true,
					    width:60
				    },
				    {
					    title:'IP',
					    key:'ip',
					    align:'center',
					    ellipsis:true,
					    tooltip:true,
					    width:100
				    },
				    {
					    title:'端口',
					    key:'port',
					    align:'center',
					    ellipsis:true,
					    tooltip:true,
					    width:100
				    },
				    {
					    title:'攻破团队数',
					    key:'finishCount',
					    align:'center',
					    ellipsis:true,
					    tooltip:true,
					    width:100
				    },
				    {
					    title:'未攻破团队数',
					    key:'notFinishCount',
					    align:'center',
					    ellipsis:true,
					    tooltip:true,
					    width:100
				    },
				    {
					    title:'是否需要提交Flag',
					    key:'isNeedSubmitFlag',
					    align:'center',
					    placement:'top-right',
					    render:(h,params) => {
						    return h('Tag',{
							    props:{
								    color:params.row.isNeedSubmitFlag == '1' ? 'var(--status-yes)' :'var(--status-no)',
								    type:"border"
							    },
							    on:{
								    click:()=>{
									    //this.showAddAndUpdate(params.row)
								    }
							    }
						    },params.row.isNeedSubmitFlag == '1' ? '是' : '否' )
					    }
				    },
                    {
	                    title:'flag',
	                    key:'flag',
	                    align:'center',
	                    ellipsis:true,
	                    tooltip:true,
	                    width:80,
	                    placement:'top-right',
                    },
				    {
					    title:'操作',
					    align:'center',
					    width:200,
					    placement:'top-right',
					    key:'action',
						opList:[
							{
								txt:'团队信息',
								fun:this.showTeamInfo
							}
						],
					    // render:(h,params) => {
						//     let _this = this;
						//     return h('div',[
						// 	   /* h('Button',{
						// 		    props:{
						// 			    type:'primary',
						// 			    size:'small',
						// 			    disabled:params.row.isNeedSubmitFlag || (!params.row.fileId)
						// 		    },
						// 		    style:{
						// 			    marginRight:'5px'
						// 		    },
						// 		    on:{
						// 			    click:()=>{
						// 			    }
						// 		    }
						// 	    },[
						// 		    h('a',{
						// 			    attrs:{
						// 				    href:"/api/ftp/edu-ftp/download?id=" + params.row.fileId,
						// 				    download:'',
						// 				    //				                			href: `../../Learn${path}`
						// 			    },
						// 			    style:{
						// 				    color:params.row.isNeedSubmitFlag || (!params.row.fileId) ? '#c5c8ce' : '#fff'
						// 			    }
						// 		    },'下载')
						// 	    ]),
						// 	    h('Button',{
						// 		    props:{
						// 			    type:'primary',
						// 			    size:'small',
						// 			    disabled:params.row.isNeedSubmitFlag || (!params.row.fileId)
						// 		    },
						// 		    style:{
						// 			    marginRight:'5px'
						// 		    },
						// 		    on:{
						// 			    click:()=>{
						// 				    let reviewUrl = `/api/ftp/edu-ftp/viewOnline/pdf/${params.row.fileId}`;//${params.row.fileId}
						// 				    this.pdfUrl = `static/pdfjs/web/viewer.html?file=${encodeURIComponent(reviewUrl)}`
						// 				    this.pdfModal = true;
						// 			    }
						// 		    }
						// 	    },"预览"),
						// 	    h('Button',{
						// 		    props:{
						// 			    type:'primary',
						// 			    size:'small',
						// 			    disabled:params.row.isNeedSubmitFlag || (!params.row.fileId)
						// 		    },
						// 		    style:{
						// 			    marginRight:'5px',
						// 			    width:'60px'
						// 		    },
						// 		    on:{
						// 			    click:()=>{
						// 				    this.gradeValidate.score = 1;
						// 				    this.gradeValidate.questionId = params.row.id;
						// 				    this.gradeValidate.teamId = params.row.teamId;
						// 				    this.curTarget = params.row;
						// 				    this.reportGradeModal.show = true;
						// 			    }
						// 		    }
						// 	    },'评分'),*/
						// 	    h('Button',{
						// 		    props:{
						// 			    type:'primary',
						// 			    size:'small',
						// 		    },
						// 		    style:{
						// 			    marginRight:'5px',
						// 			    width:'60px'
						// 		    },
						// 		    on:{
						// 			    click:()=>{
						// 				    this.showTeamInfo(params.row)
						// 			    }
						// 		    }
						// 	    },'团队信息')
						//     ])
					    // }
				    }
                ],
			    targetTeamData:[],
			    targetTeamTotal:0,
			    queryTargetTeamInfo:{
	                pageIndex:1,
	                pageSize:1,
	                sceneId:this.$route.query.id,
	                sortBy:'createTime',
	                order:'desc',
                    name:''
                },
			    gradeValidate:{
				    "questionId": "",
				    "sceneId": this.$route.query.id,
				    "score": 0,
				    "teamId": ""
			    },
			    curTarget:{},
			    showTeamInfoModel:false,
			    teamInfoTotal:0,
			    teamInfoCol:[
				    {
					    title:'团队名称',
					    key:'teamName',
					    align:'center',
					    ellipsis:true,
					    tooltip:true,
					    width:100,
					    placement:'top-left'
				    },
				    {
					    title:'报告名称',
					    key:'fileName',
					    align:'center',
					    ellipsis:true,
					    tooltip:true,
					    width:100,
				    },
				    {
					    title:'用户名',
					    key:'userName',
					    align:'center',
					    ellipsis:true,
					    tooltip:true,
					    width:60
				    },
				    {
					    title:'解决状态',
					    key:'status',
					    align:'center',
					    ellipsis:true,
					    tooltip:true,
					    render:(h,params)=>{
					    	return h('Tag',{
					    		props:{
					    			color:this.handlerStatus(params.row.status).color
                                }
                            },this.handlerStatus(params.row.status).txt)
                        }
				    },
                ],
			    teamInfoData:[],
                currentTargetId:'',
                teamInfoQuery:{
			    	pageIndex:1,
                    pageSize:10,
	                teamName:'',
	                status:0
                },
            }
        },
        mounted(){
		    this.getTargetListEr()
            this.getAllTargetTeamList()
        },
        methods:{
            getAllTargetTeamList(){
                getTargetTeamList_new({
                    pageIndex:1,
                    pageSize:2147483647,
                    sceneId:this.$route.query.id,
                    projectId:this.$route.query.prjid
                }).then(data => {
                    if(data.code==1){
                        this.allTargetTeamData = data.data.items || data.data;
                    }else{

                    }
                })
            },
	        getTargetListEr(){
		        getTargetListEr(this.queryTargetTeamInfo).then(res=>{
		        	if(res.code===1){
		        		this.targetTeamData = res.data.items;
		        		this.targetTeamTotal = res.data.total;
                    }else{
		        		this.$Message.error(res.message)
                    }
                })
            },
	        getTargetSize(size){
	        	this.queryTargetTeamInfo.pageSize = size;
	        	this.getTargetListEr()

            },
	        getTargetPage(page){
		        this.queryTargetTeamInfo.pageIndex = page;
		        this.getTargetListEr()
            },
	        searchTargetTeam(){
		        this.queryTargetTeamInfo.pageIndex = 1;
		        this.getTargetListEr()
            },
	        showTeamInfo(obj){
                this.showTeamInfoModel = true;
                this.currentTargetId = obj.id;
		        this.teamInfoQuery={
			        pageIndex:1,
				        pageSize:10,
				        teamName:'',
				        status:0
		        },
                this.getTeamInfo();
            },
            getTeamInfo(){
	        	let params = {...this.teamInfoQuery};
	        	if(params.status===0){
	        		delete params.status;
                }
                getTeamInfoEr(this.currentTargetId,params).then(res=>{
                	if(res.code === 1){
                		this.teamInfoData = res.data.items;
                		this.teamInfoTotal = res.data.total;
                    }else{
                		this.$Message.error(res.message)
                    }
                })
            },
	        getTeamInfoSize(size){
                this.teamInfoQuery.pageSize = size;
                this.getTeamInfo()
            },
	        getTeamInfoPage(page){
                this.teamInfoQuery.pageIndex = page;
                this.getTeamInfo()
            },
	        searchTeamInfo(){
		        this.teamInfoQuery.pageIndex = 1;
		        this.getTeamInfo()
            },
	        handlerStatus(status){
	        	const mapColor = {
	        		1:'red',
                    2:'green'
                };
	        	const mapTxt = {
	        		1:'未解决',
                    2:'已解决'
                }
                return{
	        		color:mapColor[status],
                    txt:mapTxt[status]
                }
            },
	        openTeamInfo(){
		        this.showTeamInfoModel = true;
            }
        }
	}
</script>

<style scoped>
    .targetHeader{
        /*padding: 10px;*/
        margin:15px 0;
    }
</style>
